<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<%--    <script>--%>
<%--      function a1(){--%>
<%--        $.post({--%>
<%--          url:"${pageContext.request.contextPath}/ajax",--%>
<%--          data:{'name':$("#txtName").val()},--%>
<%--          success:function (data,status) {--%>
<%--            alert(data);--%>
<%--            alert(status);--%>
<%--          }--%>
<%--        });--%>
<%--      }--%>
<%--    </script>--%>

    <script>

      function a1(){
        $.post({
          url:"${pageContext.request.contextPath}/ajax3",
          data:{'name':$("#name").val()},
          success:function (data) {
            if (data.toString()=='OK'){
              $("#userInfo").css("color","green");
            }else {
              $("#userInfo").css("color","red");
            }
            $("#userInfo").html(data);
          }
        });
      }
      function a2(){
        $.post({
          url:"${pageContext.request.contextPath}/ajax3",
          data:{'pwd':$("#pwd").val()},
          success:function (data) {
            if (data.toString()=='OK'){
              $("#pwdInfo").css("color","green");
            }else {
              $("#pwdInfo").css("color","red");
            }
            $("#pwdInfo").html(data);
          }
        });
      }

    </script>
  </head>
  <body>
  <%--onblur：失去焦点触发事件--%>
<%--  用户名:<input type="text" id="txtName" onblur="a1()"/>--%>


<%--  <input type="button" id="btn" value="获取数据"/>--%>
<%--  <table width="80%" align="center">--%>
<%--    <tr>--%>
<%--      <td>姓名</td>--%>
<%--      <td>年龄</td>--%>
<%--      <td>性别</td>--%>
<%--    </tr>--%>
<%--    <tbody id="content">--%>
<%--    </tbody>--%>
<%--  </table>--%>
<%--  <script>--%>

<%--    $(function () {--%>
<%--      $("#btn").click(function () {--%>
<%--        $.post("${pageContext.request.contextPath}/ajax2",function (data) {--%>
<%--          console.log(data)--%>
<%--          var html="";--%>
<%--          for (var i = 0; i <data.length ; i++) {--%>
<%--            html+= "<tr>" +--%>
<%--                    "<td>" + data[i].name + "</td>" +--%>
<%--                    "<td>" + data[i].age + "</td>" +--%>
<%--                    "<td>" + data[i].sex + "</td>" +--%>
<%--                    "</tr>"--%>
<%--          }--%>
<%--          $("#content").html(html);--%>
<%--        });--%>
<%--      })--%>
<%--    })--%>
<%--  </script>--%>

  <p>
    用户名:<input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
  </p>
  <p>
    密码:<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
  </p>

  </body>
</html>
